<template>
  <a-spin :spinning="headLoading">
    <div style="display: flex;margin-bottom: 16px; align-items: center;">
      <div style="display: flex; align-items: center;margin-right: auto">
        <span style="width: fit-content">物流单：</span>
        <a-input v-model:value="id" style="width: fit-content"/>
        <a-button type="primary" style="margin-left: 10px" @click="init">匹配库存</a-button>
      </div>
    </div>
    <div>
      <span class="titleTxt">需求解析：</span>
      <common-table
          :columns="columns"
          :dataSource="dataList"
          :pagination="false"
          :scroll="{ x: 'max-content'}"
          :slots="['obj','fixedInventoryList']"
      >
        <template #obj="{record}">
          {{record.site + '/' + record.saleZone}}
        </template>
        <template #fixedInventoryList="{record}">
          <div v-for="item in record.fixedInventoryList">
            {{item.poolCode + '/' + item.warehouseCode + " , " + item.warehouseSku + '*' + item.qty}}
          </div>
        </template>
      </common-table>
    </div>
    <div class="titleTxt" style="margin-top: 20px">库存匹配：</div>
    <div>
      <div v-for="(item,index) in roughDataList"  :key="index" style="margin-top: 20px;">
        <template v-if="item.message === ''">
          <template v-if="item.show">
            <span class="titleTxt">{{item.sku}}</span>
<!--            <span>(粗略模式(<a @click="switchMode('fine',item)">切换</a>))</span>-->
            <div style="float:right" v-if="item.poolList.length > 0">
              <a-button style="margin-right: 10px" @click="refresh(item,'rough')">刷新</a-button>
              <a-button type="primary" @click="submitRough(item)">提交</a-button>
            </div>
            <div style="color:red;font-weight: bold;font-size: 16px" v-if="item.false !== ''">{{item.false}}</div>
            <common-table
                v-if="item.poolList.length > 0"
                :columns="roughColumns"
                :dataSource="item.poolList"
                :pagination="false"
                :scroll="{ x: 'max-content' }"
                :slots="['select','warehouseSkuList','date']"
            >
              <template #date="{record}">
                <div v-if="record.etaDate!== '' && record.etaDate">{{"到港：" +  record.etaDate}}</div>
                <div v-if="record.etaSellableDate!== '' && record.etaSellableDate">{{"可售：" +  record.etaSellableDate}}</div>
              </template>
              <template #warehouseSkuList="{record}">
                <div v-for="(i,index) in record.warehouseSkuList" :key="index">
                  {{i.warehouseSku + '*' + i.qty}}
                </div>
              </template>
              <template #select="{record}">
                <a-input-number  v-model:value="record.select" :min="0" :max="record.sellableQty" />
              </template>
            </common-table>
            <div v-else>
              <a-empty />
            </div>
          </template>
        </template>
        <template v-else>
          {{item.message}}
        </template>
      </div>
    </div>
    <div>
      <div v-for="(item,index) in fineDataList" :key="index"  style="margin-top: 20px;">
        <template v-if="item.message === ''">
          <template v-if="item.show">
            <span class="titleTxt">{{ item.sku }}</span>
            <span>(精细模式(<a @click="switchMode('rough',item)">切换</a>))</span>
            <div style="float:right" v-if="item.poolList.length > 0">
              <a-button style="margin-right: 10px" @click="refresh(item,'fine')">刷新</a-button>
              <a-button type="primary" @click="submitFine(item)">提交</a-button>
            </div>
            <div style="color:red;font-weight: bold;font-size: 16px" v-if="item.false !== ''">{{item.false}}</div>
            <common-table
                v-if="item.poolList.length > 0"
                :columns="fineColumns"
                :dataSource="item.poolList"
                :pagination="false"
                :scroll="{ x: 'max-content' }"
                :slots="['warehouseSkuList']"
            >
              <template #warehouseSkuList="{record}">
                <div style="display: flex;align-items: center;margin-bottom: 10px" v-for="(i,index) in record.warehouseSkuList" :key="index">
                  <span style="width:200px"> {{i.warehouseSku + '*' + i.qty}}</span>
                  <a-input-number  v-model:value="i.select" :min="0" :max="record.sellableQty" />
                </div>
              </template>
            </common-table>
            <div v-else>
              <a-empty />
            </div>
          </template>
        </template>
        <template v-else>
          {{item.message}}
        </template>
      </div>
    </div>
  </a-spin>
</template>
<script>
export default {
  name: 'inventoryPools-reviewList'
}
</script>
<script setup>
import commonTable from '@/components/commonTable/index.vue';
import { useRoute } from 'vue-router';
import { ref,onMounted } from 'vue';
import {getParseOrder, getSearchAvailableInventoryPool, submitVerify} from "@/api/inventoryPools/performanceReview.js";
import {message} from "ant-design-vue";
const {orderId} = useRoute().query;
const id = ref(orderId);
const headLoading = ref(false);
const columns = [
  {
    title:'平台',
    dataIndex:'platform',
    key:'platform',
    align: "center",
  },
  {
    title:'站点/区域',
    dataIndex:'obj',
    key:'obj',
    align: "center",
  },
  {
    title:'SKU',
    dataIndex:'sku',
    key:'sku',
    align: "center",
  },
  {
    title:'类型',
    dataIndex:'skuType',
    key:'skuType',
    align: "center",
  },
  {
    title:'数量',
    dataIndex:'qty',
    key:'qty',
    align: "center",
  },
  {
    title:'最迟发出',
    dataIndex:'latestDeliveryTime',
    key:'latestDeliveryTime',
    align: "center",
  },
  {
    title:'物流类型',
    dataIndex:'deliveryType',
    key:'deliveryType',
    align: "center",
  },
  {
    title:'分区属性',
    dataIndex:'isSartition',
    key:'isSartition',
    align: "center",
  },
  {
    title:'已分配库存',
    dataIndex:'fixedInventoryList',
    key:'fixedInventoryList',
    align: "center",
  },
]
const roughColumns = [
  {
    title:'区域',
    dataIndex:'saleZone',
    key:'saleZone',
    align: "center",
    width:200,
  },
  {
    title:'仓库',
    dataIndex:'warehouseCode',
    key:'warehouseCode',
    align: "center",
    width:200,
  },
  {
    title:'库存池',
    dataIndex:'poolCode',
    key:'poolCode',
    align: "center",
    width:200,
  },
  {
    title:'ETA',
    dataIndex:'date',
    key:'date',
    align: "center",
    width:200,
  },
  {
    title:'SKU',
    dataIndex:'sku',
    key:'sku',
    align: "center",
    width:200,
  },
  {
    title:'总数',
    dataIndex:'totalQty',
    key:'totalQty',
    align: "center",
    width:200,
  },
  {
    title:'可用数',
    dataIndex:'usableQty',
    key:'usableQty',
    align: "center",
    width:200,
  },
  {
    title:'可售数',
    dataIndex:'sellableQty',
    key:'sellableQty',
    align: "center",
    width:200,
  },
  {
    title:'剩余明细',
    dataIndex:'warehouseSkuList',
    key:'warehouseSkuList',
    align: "center",
    width:200,
  },
  {
    title:'选择',
    dataIndex:'select',
    key:'select',
    align: "center",
    width:200,
  },
]
const fineColumns = [
  {
    title:'区域',
    dataIndex:'saleZone',
    key:'saleZone',
    align: "center",
    width:200,
  },
  {
    title:'仓库',
    dataIndex:'warehouseCode',
    key:'warehouseCode',
    align: "center",
    width:200,
  },
  {
    title:'库存池',
    dataIndex:'poolCode',
    key:'poolCode',
    align: "center",
    width:200,
  },
  {
    title:'到港ETA',
    dataIndex:'etaSellableDate',
    key:'etaSellableDate',
    align: "center",
    width:200,
  },
  {
    title:'SKU',
    dataIndex:'sku',
    key:'sku',
    align: "center",
    width:200,
  },
  {
    title:'总数',
    dataIndex:'totalQty',
    key:'totalQty',
    align: "center",
    width:200,
  },
  {
    title:'可售数',
    dataIndex:'sellableQty',
    key:'sellableQty',
    align: "center",
    width:200,
  },
  {
    title:'可用数',
    dataIndex:'usableQty',
    key:'usableQty',
    align: "center",
    width:200,
  },
  {
    title:'剩余明细-选择',
    dataIndex:'warehouseSkuList',
    key:'warehouseSkuList',
    align: "center",
    width:200,
  },
]
const roughDataList = ref([

])
const fineDataList = ref([
  {
    show:false,
    message:'',
    false:'',
    sku:"AAAAAAA",
    arr:[
    {
      saleZone: '北京',
      warehouseCode: '仓1',
      poolCode: 'A',
      etaDate: '2022-01-01',
      sku: 1,
      qty: 10,
      warehouseSkuList: [
        {
          warehouseSku:'AAAAAAAAAAAAAAAA',
          qty:2,
          select:0
        },
        {
          warehouseSku:'AAAAAAAAAAAAAAAA',
          qty:3,
          select:0
        }
      ],
    },
      {
        saleZone: '上海',
        warehouseCode: '仓2',
        poolCode: 'B',
        etaDate: '2022-01-01',
        sku: 2,
        qty: 10,
        warehouseSkuList: [
          {
            warehouseSku:'xxxxxxxxx',
            qty:2,
            select:0
          }
        ],
      }
    ]
  },
  {
    show:false,
    sku:"BBBBBBB",
    message:'',
    false:'',
    arr:[
      {
        saleZone: '北京',
        warehouseCode: '仓1',
        poolCode: 'A',
        etaDate: '2022-01-01',
        sku: 1,
        qty: 10,
        warehouseSkuList: [
          {
            warehouseSku:'xxxxxxxxx',
            qty:2,
            select:0
          },
          {
            warehouseSku:'yyyyyyyyy',
            qty:3,
            select:0
          }
        ],
      },
      {
        saleZone: '上海',
        warehouseCode: '仓2',
        poolCode: 'B',
        etaDate: '2022-01-01',
        sku: 2,
        qty: 10,
        warehouseSkuList: [
          {
            warehouseSku:'xxxxxxxxx',
            qty:2,
            select:0
          }
        ],
      }
    ]
  }
])
const dataList = ref([
  {
    platform: '京东',
    saleZone: '北京',
    sku: 1,
    skuType: '普通',
    qty: 10,
    latestDeliveryTime: '2022-01-01',
    deliveryType: '快递',
    isSartition: '无',
  },
  {
    platform: '淘宝',
    saleZone: '上海',
    sku: 2,
    skuType: '普通',
    qty: 10,
    latestDeliveryTime: '2022-01-01',
    deliveryType: '快递',
    isSartition: '无',
  }
])
const switchMode = (modes,item) => {
  let sku = item.sku
  if (modes === 'fine') {
    item.show = false
    fineDataList.value.forEach(i => {
      if (i.sku === sku) {
        i.show = true
      }
    })
  } else {
    item.show = false
    roughDataList.value.forEach(i => {
      if (i.sku === sku) {
        i.show = true
      }
    })
  }
}
const submitFine = async (item) => {
  try{
    console.log(item)
    let sku = item.sku
    let saleOrderCode = id.value
    let arr = []
    item.poolList.forEach(i => {
      if(i.warehouseSkuList && i.warehouseSkuList.length > 0 ){
        i.warehouseSkuList.forEach(j => {
          if(j.select > 0){
            let obj = {}
            obj.qty = j.select
            obj.sku = j.warehouseSku
            obj.warehouseCode = i.warehouseCode
            obj.poolCode = i.poolCode
            obj.skuType = 'part'
            arr.push(obj)
          }
        })
      }
    })
      if(arr.length === 0){
        return message.error('请选择库存')
      }
    let data = {
      sku,saleOrderCode,verifyPoolList:arr
    }
    // const res = await submitVerify(data)
    // console.log(res)
  }catch (e) {
    message.error(e)
    item.false = e
  }
}
const submitRough = async (item) => {
  try{
    console.log(item)
    let sku = item.sku
    let saleOrderCode = id.value
    let arr = []
    item.poolList.forEach(i => {
      if(i.select > 0){
        let obj = {}
        obj.qty = i.select
        obj.sku = i.sku
        obj.warehouseCode = i.warehouseCode
        obj.poolCode = i.poolCode
        obj.skuType = 'product'
        arr.push(obj)
      }
    })
    if(arr.length === 0){
      return message.error('请选择库存')
    }
    let data = {
      sku,
      saleOrderCode,
      verifyPoolList: arr
    }
    console.log(data)
    // const res = await submitVerify(data)
    // console.log(res)
  }catch(e){
    message.error(e)
  }
}
const refresh = async (item,type) => {
  id.value = orderId
  let index
  const res = await getSearchAvailableInventoryPool({
    saleOrderCode: id.value,
    sku: item.sku,
    skuType:item.skuType
  })
  if(type === 'rough'){
    index = roughDataList.value.findIndex(i => i.sku === item.sku)
    let obj1 = res.result
    obj1.show = true
    obj1.message = ''
    obj1.false = ''
    obj1.poolList.forEach(item => {
      item.select = 0
    })
    roughDataList.value.splice(index,1,obj1)
  }else{
    index = fineDataList.value.findIndex(i => i.sku === item.sku)
    let obj2 = res.result
    obj2.show = true
    obj2.message = ''
    obj2.false = ''
    obj2.poolList.forEach(item => {
      item.select = 0
    })
    fineDataList.value.splice(index,1,obj2)
  }
}
const init = async () => {
  try{
    headLoading.value = true
    fineDataList.value = []
    roughDataList.value = []
    const res1 = await getParseOrder({saleOrderCode:id.value})
    dataList.value = res1.result.records
    for (let valueElement of dataList.value) {
      const res = await getSearchAvailableInventoryPool({
        saleOrderCode: id.value,
        sku: valueElement.sku,
        skuType:valueElement.skuType
      })
      let obj1 = res.result
      obj1.show = true
      obj1.message = ''
      obj1.false = ''
      obj1.poolList.forEach(item => {
        item.select = 0
      })
      roughDataList.value.push(obj1)
      // const res2 = await getSearchAvailableInventoryPool({
      //   saleOrderCode: id.value,
      //   sku: valueElement.sku,
      //   skuType:valueElement.skuType,
      // })
      // let obj2 = res2.result
      // obj2.show = false
      // obj2.message = ''
      // obj2.false = ''
      // obj2.poolList.forEach(item => {
      //   item.select = 0
      // })
      // fineDataList.value.push(obj2)
    }
    console.log(fineDataList.value)
    console.log(roughDataList.value)
  }catch (e){
    console.log(e)
    message.error(e)
  }finally {
    headLoading.value = false
  }
}
onMounted(()=>{
  init()
})
</script>
<style scoped lang="less">
.titleTxt{
  width: fit-content;
  line-height: 33px;
  height: 33px;
  font-size: 18px;
  font-weight: 600;
}
</style>
